Tengo una matriz 2D almacenada usando useState() en React. Cuando actualizo uno de los valores en la matriz (creando una matriz 2D completamente nueva, en realidad no vuelve a representar mi componente con los nuevos valores. El componente solo se actualiza si hago algo más después de actualizar la matriz 2D que hace que el componente

Mi matriz se define así:

 const [grid, setGrid] = useState([ ['', '', ''], ['', '', ''], ['', '', ''] ]

Y lo actualizo así

 setGrid(prevGrid => { const newRow = prevGrid[posy] newRow[posx] = currentPlayer const newGrid = prevGrid newGrid[posy] = newRow return newGrid }

Y finalmente, lo estoy usando en componentes como este:

 <Square status={grid} y={2} x={0} clickEvent={() => handleBoxClick(2, 0)} /

Sospeché que el problema estaba relacionado con la "profundidad" del objeto de estado, pero no creo que React tenga los mismos problemas de no detectar actualizaciones profundas que tiene Vue. (Anteriormente soy un desarrollador de Vue) Entonces, creo que estoy haciendo algo mal aquí con la actualización del estado.

Gracias